<template>
<div>
   <el-row style="background:#fff;" class="mt10 p10">
       <el-col :span="12">
           <p class="p10" style="background:#f2f2f2;">平台数据</p>



<el-table
    :data="firstData"
    border
    class="mt10"
    style="width: 100%">
    <el-table-column
      prop="total_recharge_money"
      label="充值金额"
      >
    </el-table-column>
    <el-table-column
      prop="recharge_pearl_count"
      label="充值珍珠"
     >
    </el-table-column>
    <el-table-column
      prop="web_recharge_money"
      label="WEB充值">
    </el-table-column>
     <el-table-column
      prop="android_recharge_money"
      label="安卓充值">
    </el-table-column>
     <el-table-column
      prop="ios_recharge_money"
      label="IOS充值">
    </el-table-column>
   
     <el-table-column
      prop="ios_waste_money"
      label="IOS手续费">
    </el-table-column>

    <el-table-column
      prop="total_exchange_money"
      label="珍珠兑换">
    </el-table-column>

     <el-table-column
      prop="total_user_count"
      label="用户数">
    </el-table-column>

     <el-table-column
      prop="total_docent_count"
      label="讲师数">
    </el-table-column>
   
  </el-table>


<el-table
    :data="secondData"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="运营支出"
      >
    </el-table-column>
    <el-table-column
      prop="totalcount"
      label="总计"
     >
    </el-table-column>
    <el-table-column
      prop="zs"
      label="充值赠送">
    </el-table-column>
     <el-table-column
      prop="teacherMoney"
      label="讲师激励">
    </el-table-column>
     <el-table-column
      prop="studentPay"
      label="学员赔付">
    </el-table-column>
   
     <el-table-column
      prop="actionPersent"
      label="活动赠礼">
    </el-table-column>
    <el-table-column
      prop="share"
      label="分享赠礼">
    </el-table-column>
    <el-table-column
      prop="othersActon"
      label="其他">
    </el-table-column>
  </el-table>


<el-table
    :data="thirdData"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="珍珠扣除"
      >
    </el-table-column>
    <el-table-column
      prop="totalcount"
      label="总计"
     >
    </el-table-column>
    <el-table-column
      prop="teacherBad"
      label="讲师违规">
    </el-table-column>
     <el-table-column
      prop="useBug"
      label="利用bug充值">
    </el-table-column>
     <el-table-column
      prop="useGJ"
      label="恶意攻击系统">
    </el-table-column>
   
    <el-table-column
      prop="others"
      label="其他">
    </el-table-column>
  </el-table>

<el-table
    :data="foureData"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="珍珠去向"
      >
    </el-table-column>
    <el-table-column
      prop="totla"
      label="总额"
     >
    </el-table-column>
    <el-table-column
      prop="couseOrder"
      label="课程订单">
    </el-table-column>
     <el-table-column
      prop="SMSOrder"
      label="短信订单">
    </el-table-column>
     <el-table-column
      prop="moneyOrder"
      label="赏金订单">
    </el-table-column>
   
  </el-table>


       </el-col>

       <el-col :span="12">
            <div class="ml20 pt5" style="background:#f2f2f2;height:35px;">
            <el-form :inline="true"  class="ml20" size="mini">
              
               <el-form-item label="增量数据"></el-form-item>
                   <el-form-item label="时间段">
                 <el-date-picker
                    v-model="opeationTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions1"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                 <el-button type="primary" @click="priceSearch">查询</el-button>
                </el-form-item>
        </el-form>
        <div style="clear:both"></div>
</div>
<div class="ml20">

<el-table
    :data="right1Data"
    border
    
    style="width: 100%">
    <el-table-column
      prop="total_recharge_money"
      label="充值金额"
      >
    </el-table-column>
    <el-table-column
      prop="recharge_pearl_count"
      label="充值珍珠"
     >
    </el-table-column>
    <el-table-column
      prop="web_recharge_money"
      label="WEB充值">
    </el-table-column>
     <el-table-column
      prop="android_recharge_money"
      label="安卓充值">
    </el-table-column>
     <el-table-column
      prop="ios_recharge_money"
      label="IOS充值">
    </el-table-column>
   
     <el-table-column
      prop="ios_waste_money"
      label="IOS手续费">
    </el-table-column>

    <el-table-column
      prop="total_exchange_money"
      label="珍珠兑换">
    </el-table-column>

     <el-table-column
      prop="total_user_count"
      label="用户数">
    </el-table-column>

     <el-table-column
      prop="total_docent_count"
      label="讲师数">
    </el-table-column>
   
  </el-table>


<el-table
    :data="right2Data"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="运营支出"
      >
    </el-table-column>
    <el-table-column
      prop="totalcount"
      label="总计"
     >
    </el-table-column>
    <el-table-column
      prop="zs"
      label="充值赠送">
    </el-table-column>
     <el-table-column
      prop="teacherMoney"
      label="讲师激励">
    </el-table-column>
     <el-table-column
      prop="studentPay"
      label="学员赔付">
    </el-table-column>
   
     <el-table-column
      prop="actionPersent"
      label="活动赠礼">
    </el-table-column>
    <el-table-column
      prop="share"
      label="分享赠礼">
    </el-table-column>
    <el-table-column
      prop="othersActon"
      label="其他">
    </el-table-column>
  </el-table>


<el-table
    :data="right3Data"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="珍珠扣除"
      >
    </el-table-column>
    <el-table-column
      prop="totalcount"
      label="总计"
     >
    </el-table-column>
    <el-table-column
      prop="teacherBad"
      label="讲师违规">
    </el-table-column>
     <el-table-column
      prop="useBug"
      label="利用bug充值">
    </el-table-column>
     <el-table-column
      prop="useGJ"
      label="恶意攻击系统">
    </el-table-column>
   
    <el-table-column
      prop="others"
      label="其他">
    </el-table-column>
  </el-table>

<el-table
    :data="right4Data"
    border
    class="mt20"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="珍珠去向"
      >
    </el-table-column>
    <el-table-column
      prop="totla"
      label="总额"
     >
    </el-table-column>
    <el-table-column
      prop="couseOrder"
      label="课程订单">
    </el-table-column>
     <el-table-column
      prop="SMSOrder"
      label="短信订单">
    </el-table-column>
     <el-table-column
      prop="moneyOrder"
      label="赏金订单">
    </el-table-column>
   
  </el-table>
</div>

<br>
<br>
           </el-col>        



   </el-row>
   <el-row style="display:none">

   <div class="user-table" >
 
                <div class="price  mt10 bg-white">
                    <dl>
                      <dt>
                        <div id="register" style="height:350px;width:550px;"></div>
                      </dt>
                    </dl>
                </div>
      
                <div class="price  mt10 bg-white">
                    
                </div>

          
    </div>
   </el-row>
   </div>
</template>

<script>
var echarts = require("echarts");
import service from "@/service/index_c";
export default {
  data() {
    return {
      tableData: [],
      firstData: [],
      secondData: [],
      thirdData: [],
      foureData: [],
      right1Data: [],
      right2Data: [],
      right3Data: [],
      right4Data: [],
      opeationTime: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  mounted() {
    this.formmatDate();
    this.queryHaibeiLoadRechargeTableDataList();
    this.queryHaibeiLoadRechargeTableDataList(1);

    this.queryHaibeiLoadPearlSendStatDataList();
    this.queryHaibeiLoadPearlSendStatDataList(1);

    this.queryHaibeiLoadPearlLessStatDataList();
    this.queryHaibeiLoadPearlLessStatDataList(1);

    this.queryHaibeiLoadPearlInOutStatDataList();
    this.queryHaibeiLoadPearlInOutStatDataList(1);

    this.queryChartPie();
  },
  methods: {
    priceSearch() {
      this.queryHaibeiLoadRechargeTableDataList(1);
      this.queryHaibeiLoadPearlSendStatDataList(1);
      this.queryHaibeiLoadPearlLessStatDataList(1);
      this.queryHaibeiLoadPearlInOutStatDataList(1);
    },
    formmatDate() {
      let begin = new Date();
      let end = new Date();
      let month=(begin.getMonth()+1)<10?`0${(begin.getMonth()+1)}`:(begin.getMonth()+1)
      let date0=begin.getDate()<10?`0${begin.getDate()}`:begin.getDate();
      let begintime = begin.getFullYear()+'-'+month+'-01';
      let endtime =  begin.getFullYear()+'-'+(begin.getMonth()+1)+'-'+date0;
      this.opeationTime = [begintime,endtime];
    },

    async queryHaibeiLoadRechargeTableDataList(type = 0) {
      // console.log( this.setParams(type));
      let res = await service.haibeiLoadRechargeTableDataList(
        this.setParams(type)
      );
      if (res.success) {
        if (type == 1) {
          this.right1Data=[];
          this.right1Data.push(res.result);
        } else {
           this.firstData=[];
          this.firstData.push(res.result);
        }
      }
    },
    async queryHaibeiLoadPearlSendStatDataList(type = 0) {
      let res = await service.haibeiLoadPearlSendStatDataList(
        this.setParams(type)
      );
      if (res.success) {
        if (type == 1) {
          this.right2Data = this.secondCommonFun(res);
        } else {
          this.secondData = this.secondCommonFun(res);
        }
      }
    },
    secondCommonFun(res) {
      let result = res.result;
      let sendPearl = result.sendPearl;
      let sendUserCount = result.sendUserCount;
      sendPearl.name = "珍珠数量";
      sendUserCount.name = "发放人次";
      sendPearl.totalcount = sendPearl.pearltotalcount;
      sendUserCount.totalcount = sendUserCount.usertotalcount;
      let secondData = [sendPearl, sendUserCount];
      let arrAll = [];

      for (let item of secondData) {
        let obj = {
          name: item.name,
          teacherMoney: item["1"],
          othersActon: item["2"],
          actionPersent: item["3"],
          studentPay: item["4"],
          totalcount: item.totalcount,
          zs: item.zs,
          share: item.share
        };
        arrAll.push(obj);
      }
      return arrAll;
    },

    async queryHaibeiLoadPearlLessStatDataList(type = 0) {
      let res = await service.haibeiLoadPearlLessStatDataList(
        this.setParams(type)
      );
      if (res.success) {
        if (type == 1) {
          this.right3Data = this.thirdCommonFun(res);
        } else {
          this.thirdData = this.thirdCommonFun(res);
        }
      }
    },
    thirdCommonFun(res) {
      let result = res.result;
      let sendPearl = result.lesspearlcount;
      let sendUserCount = result.lessusercount;
      sendPearl.name = "珍珠数量";
      sendUserCount.name = "扣除人次";
      sendPearl.totalcount = sendPearl.pearlcounttotal;
      sendUserCount.totalcount = sendUserCount.usercounttotal;
      let secondData = [sendPearl, sendUserCount];
      let arrAll = [];
      for (let item of secondData) {
        let obj = {
          name: item.name,
          teacherBad: item["11"],
          others: item["14"],
          useBug: item["12"],
          useGJ: item["13"],
          studentPay: item["4"],
          totalcount: item.totalcount
        };
        arrAll.push(obj);
      }
      return arrAll;
    },
    async queryHaibeiLoadPearlInOutStatDataList(type = 0) {
      let res = await service.haibeiLoadPearlInOutStatDataList(
        this.setParams(type)
      );
      let result = res.result;

      if (res.success) {
        let all = {
            name: "所有",
            totla: result.all_total,
            couseOrder: result.all_course_total,
            SMSOrder: result.all_sms_total,
            moneyOrder: result.all_reward_total
          },
          tkdd = {
            name: "退款订单",
            totla:
              result.refund_pearl_total +
              " (" +
              result.refund_pearl_total_per +
              ")",
            couseOrder:
              result.refund_pearl_course +
              " (" +
              result.refund_pearl_course_per +
              ")",
            SMSOrder:
              result.refund_pearl_sms +
              " (" +
              result.refund_pearl_sms_per +
              ")",
            moneyOrder:
              result.refund_pearl_reward +
              " (" +
              result.refund_pearl_reward_per +
              ")"
          },
          dff = {
            name: "待发放",
            totla:
              result.wait_send_total + " (" + result.wait_send_total_per + ")",
            couseOrder:
              result.wait_send_course +
              " (" +
              result.wait_send_course_per +
              ")",
            SMSOrder:
              result.wait_send_sms + " (" + result.wait_send_sms_per + ")",
            moneyOrder:
              result.wait_send_reward + " (" + result.wait_send_reward_per + ")"
          },
          ptsr = {
            name: "平台收入",
            totla:
              result.plat_in_out_total +
              " (" +
              result.plat_in_out_total_per +
              ")",
            couseOrder:
              result.plat_in_out_course +
              " (" +
              result.plat_in_out_course_per +
              ")",
            SMSOrder:
              result.plat_in_out_sms + " (" + result.plat_in_out_sms_per + ")",
            moneyOrder:
              result.plat_in_out_reward +
              " (" +
              result.plat_in_out_reward_per +
              ")"
          },
          jssr = {
            name: "讲师收入",
            totla:
              result.docent_in_out_total +
              " (" +
              result.docent_in_out_total_per +
              ")",
            couseOrder:
              result.docent_in_out_course +
              " (" +
              result.docent_in_out_course_per +
              ")",
            SMSOrder:
              result.docent_in_out_sms +
              " (" +
              result.docent_in_out_sms_per +
              ")",
            moneyOrder:
              result.docent_in_out_reward +
              "(" +
              result.docent_in_out_reward_per +
              ")"
          };
        if (type == 1) {
          this.right4Data = [all, tkdd, dff, ptsr, jssr];
        } else {
          this.foureData = [all, tkdd, dff, ptsr, jssr];
        }
      }
    },
    setParams(type) {
      let params = {
        startTime: this.opeationTime?this.opeationTime[0]:'',
        endTime: this.opeationTime?this.opeationTime[1]:''
      };
      let param = type == 1 ? params : {};
      return param;
    },
    queryChartPie() {
      let worldMapContainer = document.getElementById("register");
      var myChart = echarts.init(worldMapContainer);
      let option = {
        title: {
          text: "订单来源",
          subtext: "",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        calculable: false,
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: 10, name: "rose1" },
              { value: 5, name: "rose2" },
              { value: 15, name: "rose3" },
              { value: 25, name: "rose4" },
              { value: 20, name: "rose5" },
              { value: 35, name: "rose6" },
              { value: 30, name: "rose7" },
              { value: 40, name: "rose8" }
            ]
          }
        ]
      };
      myChart.setOption(option, true);
    }
  }
};
</script>

<style scoped>
.user-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.price {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 49%;
  height: 450px;
}
dl {
  text-align: center;
}
dl dt {
  font-size: 30px;
  color: #00aeff;
}
dl dd {
  margin-top: 10px;
  color: #6d727a;
  font-size: 12px;
}
</style>